<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/main.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>

        .wizard {
            -webkit-border-radius: 2px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px;
            -moz-background-clip: padding;
            border-radius: 2px;
            background-clip: padding-box;
            -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            box-shadow: 0 0 4px rgba(0, 0, 0, .3);
            background-color: #fff;
            position: relative;
            overflow: hidden
        }

        .wizard.wizard-tabbed {
            background: #fbfbfb
        }

        .wizard.wizard-tabbed ul li {
            padding: 0 30px;
            background-color: #fbfbfb
        }

        .wizard.wizard-tabbed ul li .chevron {
            display: none
        }

        .wizard.wizard-tabbed ul li .chevron:before {
            display: none
        }

        .wizard.wizard-tabbed ul li.complete {
            background-color: #fbfbfb
        }

        .wizard.wizard-tabbed ul li.active {
            background: #fff
        }

        .wizard.wizard-wired {
            padding-top: 10px;
            display: block;
            background: #fff;
            text-align: center;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            border-bottom: 1px solid #eee
        }

        .wizard.wizard-wired ul {
            display: table;
            width: 100%;
            position: relative
        }

        .wizard.wizard-wired ul li {
            display: table-cell;
            text-align: center;
            background-color: #fff;
            width: 20%;
            padding: 0;
            margin: 0;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease
        }

        .wizard.wizard-wired ul li .chevron {
            display: none
        }

        .wizard.wizard-wired ul li .chevron:before {
            display: none
        }

        .wizard.wizard-wired ul li.complete {
            background-color: #fff
        }

        .wizard.wizard-wired ul li.complete .step:before {
            font-size: 22px;
            line-height: 36px
        }

        .wizard.wizard-wired ul li.complete:hover {
            background-color: #fff
        }

        .wizard.wizard-wired ul li.active {
            background-color: #fff
        }

        .wizard.wizard-wired ul li .step {
            border-width: 2px;
            width: 40px;
            height: 40px;
            line-height: 34px;
            font-size: 15px;
            z-index: 2;
            background-color: #fff
        }

        .wizard.wizard-wired ul li .title {
            display: block;
            margin-top: 4px;
            margin-bottom: 6px;
            max-width: 100%;
            font-size: 14px;
            line-height: 20px;
            z-index: 104;
            text-align: center;
            table-layout: fixed;
            -ms-word-wrap: break-word;
            word-wrap: break-word
        }

        .wizard.wizard-wired ul li:before {
            display: block;
            content: "";
            width: 100%;
            height: 2px !important;
            font-size: 0;
            overflow: hidden;
            background-color: #e5e5e5;
            position: relative !important;
            top: 25px;
            z-index: 1 !important
        }

        .wizard.wizard-wired ul li:first-child:before {
            max-width: 51%;
            left: 50%
        }

        .wizard.wizard-wired ul li:last-child:before {
            max-width: 50%;
            width: 50%
        }

        .wizard ul {
            list-style: none outside none;
            padding: 0;
            margin: 0;
            width: 4000px
        }

        .wizard ul.previous-disabled li.complete {
            cursor: default
        }

        .wizard ul.previous-disabled li.complete:hover {
            background: #f3f3f3;
            cursor: default
        }

        .wizard ul.previous-disabled li.complete:hover .chevron:before {
            border-left-color: #f3f3f3
        }

        .wizard ul li {
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 46px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 16px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li .step {
            border: 2px solid #e5e5e5;
            color: #ccc;
            font-size: 13px;
            border-radius: 100%;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 20px;
            text-align: center;
            margin-right: 10px
        }

        .wizard ul li .chevron {
            border: 24px solid transparent;
            border-left: 14px solid #d4d4d4;
            border-right: 0;
            display: block;
            position: absolute;
            right: -14px;
            top: 0;
            z-index: 1
        }

        .wizard ul li .chevron:before {
            border: 24px solid transparent;
            border-left: 14px solid #f5f5f5;
            border-right: 0;
            content: "";
            display: block;
            position: absolute;
            right: 1px;
            top: -24px;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease
        }

        .wizard ul li.complete {
            background: #f5f5f5;
            color: #444
        }

        .wizard ul li.complete:before {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #a0d468;
            z-index: 10000
        }

        .wizard ul li.complete:hover {
            background: #eee;
            cursor: pointer
        }

        .wizard ul li.complete:hover .chevron:before {
            border-left: 14px solid #eee
        }

        .wizard ul li.complete .chevron:before {
            border-left: 14px solid #f5f5f5
        }

        .wizard ul li.complete .step {
            color: #a0d468;
            border-color: #a0d468
        }

        .wizard ul li.complete .step:before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            line-height: 20px;
            text-align: center;
            border-radius: 100%;
            content: "";
            background-color: #fff;
            z-index: 3;
            font-family: FontAwesome;
            font-size: 12px;
            color: #a0d468
        }

        .wizard ul li.active {
            background: #fff;
            color: #262626
        }

        .wizard ul li.active .step {
            border-color: #2dc3e8;
            color: #2dc3e8
        }

        .wizard ul li.active:before {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #2dc3e8;
            z-index: 10000
        }

        .wizard ul li.active .chevron:before {
            border-left: 14px solid #fff
        }

        .wizard ul li .badge {
            margin-right: 8px
        }

        .wizard ul li:first-child {
            -webkit-border-radius: 2px 0 0 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 2px 0 0 0;
            -moz-background-clip: padding;
            border-radius: 2px 0 0 0;
            background-clip: padding-box;
            padding-left: 20px
        }

        .step-content {
            border-top: 0;
            -webkit-border-radius: 0 0 2px 2px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 0 0 2px 2px;
            -moz-background-clip: padding;
            border-radius: 0 0 2px 2px;
            background-clip: padding-box;
            padding: 10px;
            margin-bottom: 10px;
            -webkit-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            -moz-box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            box-shadow: 1px 0 10px 1px rgba(0, 0, 0, .3);
            background-color: #fbfbfb
        }

        .step-content .step-pane {
            display: none
        }

        .step-content .active {
            display: inline;
        }

        .step-content .active .btn-group .active {
            display: inline-block
        }
        .wizard{
            position: fixed;
            z-index:9999;
        }
        .actions .btn-group, .btn-group-vertical{
            left: 5%;
        }
</style>

</head>

<body>
<!--<div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">-->
    <!--<div class="actions" id="simplewizardinwidget-actions">-->
    <!--</div>-->
<!--</div>-->
<!--预留相对定位头部覆盖掉的部分-->
<form action="" class="layui-form layui-form-pane" id="myform" style="position: relative;top: 47px;">
    <div class="layui-form-item">
	<div class="layui-inline">
                        <label class="layui-form-label">库位名称</label>
                        <div class="layui-input-inline">
                        <input type="text" class="layui-input" lay-verify="required" name="mc" id="mc" placeholder="请输入库位名称" />
                        </div>
     </div>
    <div class="layui-inline">
        <label class="layui-form-label">库区名称</label>
        <div class="layui-input-inline">
            <select lay-ignore="lay-ignore" class="js-data-example-ajax" name="sskqid" id="sskqid" style="width: 193px"></select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">可承受重量</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="cszl" id="cszl" value="0" placeholder="请输入可承受重量" />
        </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">可容纳体积</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="rntj" id="rntj"  value="0" placeholder="可容纳体积" />
    </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">库位托盘数</label>
       <div class="layui-input-inline">
            <input type="text" name="tps" placeholder="请输入库位托盘数"  value="1"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">库位层数</label>
        <div class="layui-input-inline">
            <input type="text" name="cs" placeholder="请输入库位层数" value="1"  autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">拣货顺序</label>
        <div class="layui-input-inline">
            <input type="text" name="xlsx" placeholder="请输入拣货顺序" value="0" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">库位属性</label>
        <div class="layui-input-inline">
            <select name="sx">
                <option value="0">正常</option>
                <option value="1">封存</option>
                <option value="2">管控</option>
                <option value="3">禁入</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">库位类型</label>
        <div class="layui-input-inline">
            <select name="lx">
                <option value="0">存储库位</option>
                <option value="1">件拣货库位</option>
                <option value="2">箱拣货库位</option>
                <option value="3">箱/件拣货库位</option>
                <option value="4">暂存库位</option>
                <option value="5">集货库位</option>
                <option value="6">组装工作库位</option>
            </select>
        </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="bz" placeholder="备注"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">是否可以混放货品</label>
        <div class="layui-input-inline">
            <select name="hphf" id="hphf" lay-filter="test">
                <option value="0">不允许</option>
                <option value="1">允许</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">库位高度</label>
        <div class="layui-input-inline">
            <input type="text" name="kwgd" placeholder="请输入库位高度" value="0" autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">库位可用系数（0-1）</label>
        <div class="layui-input-inline">
            <input type="text" name="kyxs" id="kyxs" lay-verify="number" placeholder="请输入库位可用系数"  autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline" id="div1"  style="margin-left: 10px;">
            <label class="layui-form-label">同货品批次是否可以混放</label>
            <div class="layui-input-inline">
                <select name="pchf">
                    <option value="0">不允许</option>
                    <option value="1">允许</option>
                </select>
            </div>
        </div>
    </div>
    <!--<div class="layui-inline" id="div1">-->
        <!--<label class="layui-form-label">同货品批次是否可以混放</label>-->
        <!--<div class="layui-input-inline">-->
            <!--<select name="pchf" >-->
                <!--<option value="0">不允许</option>-->
                <!--<option value="1">允许</option>-->
            <!--</select>-->
        <!--</div>-->
    <!--</div>-->
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="addkuwei">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

</body>
<div th:include="/public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>

    $(function () {
            //查询库区
        $('.js-data-example-ajax').select2({
            ajax: {
                url: '/zxsdwms/wmslibraryposition/addSearchArea',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
               data: function (params) {
                    var query = {
                        mc: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr= new Array();
                    console.log('data', data);
                    if(data){
                        for (var i=0;i<data.length;i++){
                            arr.push({id:data[i].id,text:data[i].mc});
                        }
                    }
                    console.log(arr);
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });

    })
    layui.use(['myform','zzpUtils','form'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils;
        form.on("submit(addkuwei)",function(data){
            if($("#kyxs").val()>1||$("#kyxs").val()<0){
                layer.msg("库位可用系数需在0-1之间");
            }else if($("#sskqid").val()==null){
                layer.msg("库区名称不可为空");
            }else{
                zzpUtils.confirm("是否确定新增?",function(index){
                    zzpUtils.action({
                        url:"/wmslibraryposition/add",
                        data:JSON.stringify(data.field),
                        success:function (data) {
                            setTimeout(function(){
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                                top.layer.msg(data.title+","+data.message);
                            },500);
                        },error: function (xhr, textStatus) {
                            console.log(textStatus);
                            console.log(xhr)
                        }
                    })
                })
            }
            return false;

        });
        form.on('select(test)', function(data){
            if(data.value==1){
                var mychar = document.getElementById("div1").style.display ="none";
                var mychar2 = document.getElementById("div1").style.marginLeft="320px";
            }else if(data.value==0){
                var mychar = document.getElementById("div1").style.display ="block";
            }
        });
    });
</script>
</html>